<template>
  <a-modal
      v-model:visible="bindVisible"
      :title="form?.userId ? $t('operation.edit') : $t('operation.insert')"
      :cancelText="$t('operation.cancel')"
      :okText="$t('operation.confirm')"
      @ok="confirm"
  >
    <a-form layout="vertical">
      <a-form-item :label="$t('userInfoModal.account')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="form.userAccount" allow-clear :disabled="form?.userId"/>
      </a-form-item>
      <a-form-item :label="$t('userInfoModal.password')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="form.password" :type="pwdVisible ? '' : 'password'"
                 allow-clear>
          <template #suffix>
            <eye-outlined v-if="!pwdVisible" @click="pwdVisible = !pwdVisible"/>
            <eye-invisible-outlined v-else @click="pwdVisible = !pwdVisible"/>
          </template>
        </a-input>
      </a-form-item>
      <a-form-item :label="$t('userInfoModal.username')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="form.username" allow-clear/>
      </a-form-item>
      <a-form-item :label="$t('userInfoModal.role')">
        <a-select :placeholder="$t('operation.select')" v-model:value="form.role" allow-clear>
          <a-select-option v-for="item in UserRoleOption" :key="item.value">{{ getRoleName(item.value) }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="form.role === UserRoleEnums.NORMAL" :label="$t('userInfoModal.permission')">
        <a-select
        :placeholder="$t('operation.select')"
          v-model:value="form.permissionList"
          allow-clear
          mode="multiple"
          :filterOption="filterOption"
        >
          <a-select-option v-for="item in projects" :key="item.projectId" :label="item.projectName">
            {{ item.projectName }}
          </a-select-option>
        </a-select>
      </a-form-item>
<!--      <a-form-item v-if="form.role === UserRoleEnums.NORMAL" :label="$t('userInfoModal.permission')">-->
<!--        <a-form v-for="item in projects">-->
<!--          <a-checkbox :checked="form.permissionList?.indexOf(item.projectId)>=0"-->
<!--                      :value="item.projectId"-->
<!--                      @change="checkPermission">{{ item.projectName }}-->
<!--          </a-checkbox>-->
<!--        </a-form>-->
<!--      </a-form-item>-->
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {User, UserRoleEnums, UserRoleOption} from '@/store/user'
import {Project} from '@/store/project'
import {PropType} from 'vue'
import {getRoleName} from "@/store/user";

const props = defineProps({
  form: {type: Object as PropType<User>, default: () => ({})},
  visible: {type: Boolean, default: false},
  projects: {type: Array as PropType<Project[]>, default: () => []},
})
const emit = defineEmits(['update:visible', 'ok'])
const bindVisible = ref(false)
watchEffect(() => (bindVisible.value = props.visible))
watchEffect(() => emit('update:visible', bindVisible.value))

const pwdVisible = ref(false)

const confirm = async () => {
  const res = await request.post('/api/dynamic-mock/user/save', props.form)
  bindVisible.value = false
  emit('ok')
}

const filterOption = (text: string, option: any) => {
  return ~option.label.indexOf(text)
}

const checkPermission = (event) => {
  if (event.target.checked) {
    if (!props.form.permissionList) {
      props.form.permissionList=[]
    }
    props.form.permissionList.push(event.target.value);
  } else {
    props.form.permissionList.splice(props.form.permissionList.indexOf(event.target.value))
  }
}

</script>
